<template>
	<div>
		<AplidForm ref="formRef" v-bind="formConfig" v-model="formModel" @submit="onSubmit">
			<template v-slot:configForm>
				<div class="config-box">
					<NavTabs
						:addable="true"
						:max="4"
						:tabs="tabsList"
						v-model="activeIndex"
						@tab-delete="handleTabDelete"
						@tab-change="handleTabsClick"
						@tab-add="handleTabsAdd"
					></NavTabs>
					<div class="area-config">
						<div class="text-label">适用范围</div>
						<div class="text-value">
							<AreaPanel v-model="formModel.adaptRangeJsonArray"></AreaPanel>
						</div>
					</div>
				</div>
				<el-scrollbar max-height="30rem" class="w-100 mt10">
					<draggable v-model="nodeList" tag="ul" class="config-box" group="people" item-key="index">
						<template #item="{ element, index }">
							<li>
								<div class="config-item">
									<div class="card-header f-between">
										<span class="index-box fc">{{ index + 1 }}</span>
										<div class="tc mt10 footer-btn" v-if="nodeList.length - 1 == index">
											<el-button class="button" v-if="index !== 0" @click="handleDelete()">删除</el-button>
											<el-button type="primary" class="button mt10" @click="handleAdd">
												<el-icon>
													<icon-plus />
												</el-icon>
												审批环节
											</el-button>
										</div>
									</div>
									<div class="flex mt10">
										<p class="label">审批层级</p>
										<el-radio-group v-model="element.approvalHierarchy">
											<el-radio-button label="1">所属社区</el-radio-button>
											<el-radio-button label="2">所属街道</el-radio-button>
											<el-radio-button label="3">所属区</el-radio-button>
											<el-radio-button label="4">市级</el-radio-button>
											<el-radio-button label="5">第三方</el-radio-button>
										</el-radio-group>
									</div>
									<Associate v-if="element.approvalHierarchy == 5" v-model:userList="element.userList" v-model="element.userIdList"></Associate>
									<div class="flex mt10">
										<p class="label">审批方式</p>
										<el-radio-group v-model="element.approvalWay">
											<el-radio-button :label="1">或签（一人签署则审批通过）</el-radio-button>
											<el-radio-button :label="2">会签（全部签署则审批通过）</el-radio-button>
										</el-radio-group>
									</div>
									<div class="flex mt10">
										<p class="label">驳回层级</p>
										<el-radio-group v-model="element.rejectHierarchy">
											<el-radio-button :label="1">驳回至数据提交方</el-radio-button>
											<el-radio-button :label="2" v-if="index > 0">驳回至上级</el-radio-button>
										</el-radio-group>
									</div>
								</div>
								<div class="down-arrow fc" v-if="nodeList.length - 1 !== index">
									<img :src="downArrowImg" alt="" class="img" />
								</div>
							</li>
						</template>
					</draggable>
				</el-scrollbar>
			</template>
		</AplidForm>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import draggable from 'vuedraggable'
import { api, formConfig } from '../config'
import Associate from './Associate/index.vue'
import { getStore } from '@/utils/store'
import downArrowImg from '@/assets/icons/down-arrow.png'
import NavTabs from '@/views/instOperate/components/NavTabs/index.vue'
import AreaPanel from './AreaPanel/index.vue'
type Props = {
	nowRowData: any
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['refresh'])

const userInfo = getStore('userInfo')
const authAreaLen = [userInfo.authProvince, userInfo.authCity, userInfo.authArea, userInfo.authStreet, userInfo.authCommunity].filter(Boolean).length
let approvalNum = '4'
switch (authAreaLen) {
	case 1:
		approvalNum = '5'
		break
	case 2:
		approvalNum = '4'
		break
	case 3:
		approvalNum = '3'
		break
	case 4:
		approvalNum = '2'
		break
	case 5:
		approvalNum = '1'
		break
	default:
		break
}
const configList = ref({
  1:{
    label: `方案 1`,
		nodeList: [
			{
				approvalHierarchy: approvalNum,
				approvalWay: 1,
				rejectHierarchy: 1,
			},
		],
  }
})
const nodeList = ref(
	props.nowRowData.workflowConfiguration || [
		{
			approvalHierarchy: approvalNum,
			approvalWay: 1,
			rejectHierarchy: 1,
		},
	]
)
const formModel: any = ref({
	userIdList: '',
	...props.nowRowData,
	adaptRangeJsonArray: [],
})

const activeIndex = ref(1)
const tabsList = ref([
	{
		label: '方案1',
		value: 1,
	},
])
const handleTabsClick = (item) => {
	console.log(item, activeIndex.value, 'item----')
}

const handleTabsAdd = (active) => {
	tabsList.value.push({
		label: `方案 ${active}`,
		value: active,
	})
	activeIndex.value = active
	configList.value[active] = {
		label: `方案 ${active}`,
		nodeList: [
			{
				approvalHierarchy: approvalNum,
				approvalWay: 1,
				rejectHierarchy: 1,
			},
		],
	}
}
const handleTabDelete = (item, index) => {
	tabsList.value.splice(index, 1)
	activeIndex.value = tabsList.value.length
}
const handleDelete = (index?: number) => {
	if (nodeList.value.length > 1) {
		if (index) {
			nodeList.value.splice(index, 1)
		} else {
			nodeList.value.pop()
		}
	}
}
const handleAdd = (index) => {
	nodeList.value.push({
		approvalHierarchy: approvalNum,
		approvalWay: 1,
		rejectHierarchy: 1,
	})
}
const onSubmit = (form, done) => {
	const params = {
		...form,
		workflowConfiguration: nodeList.value.map((item, index) => {
			return {
				...item,
				sequence: index + 1,
			}
		}),
	}
	const baseApi = form.id ? api.edit : api.add
	apiMod[baseApi]({
		...params,
	})
		.then((res) => {
			emit('refresh', res.data)
			done()
		})
		.catch((err) => {
			done()
		})
}
</script>

<style scoped lang="scss">
:deep(.el-radio-group) {
	gap: 10px;
}
:deep(.el-radio-button--default .el-radio-button__inner) {
	background: #e7e7e7;
	border: none;
	border-radius: 6px;
	padding: 4px 16px;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
	border-radius: 6px;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
	background: #6498ff;
	border: none;
	box-shadow: none;
}
:deep(.el-radio-button__inner:hover) {
	color: #fff;
}

.text-label {
	min-width: vw(65);
	margin-right: 20px;
	font-family: 'Microsoft YaHei';
	font-weight: 400;
	font-size: 16px;
	color: #1c1c28;
}
.area-config {
	margin-top: 30px;
}
.config-box {
	margin: 0 auto;
	width: vw(476);
	position: relative;

	.down-arrow {
		padding: 10px 0;
		.img {
			width: 18.55px;
			height: 33px;
			background: transparent;
			transition: transform 0.3s ease-in-out;
		}
	}
	.config-item {
		border-radius: 10px;
		padding: 10px;
		// box-shadow: var(--el-box-shadow);
		margin-top: 10px;
		border: 1px solid #4787f0;

		.label {
			@extend .text-label;
		}

		.card-header {
			position: relative;
			.index-box {
				width: 24px;
				height: 20px;
				border-radius: 4px;
				background: #4787f0;
				font-family: 'Microsoft YaHei Bold';
				font-weight: 700;
				font-size: 14px;
				color: #feffff;
			}
			.footer-btn {
				position: absolute;
				top: 0;
				right: -170px;
				display: flex;
				flex-flow: column;
				align-items: baseline;
			}
		}
	}
}
</style>
